<template>
  <el-form :model="advancedForm" label-width="90px" class="search-form">
           <!-- 修改：将优先显示部分改为单选按钮 -->
           <el-form-item label="查询指标">
             <el-radio-group v-model="orderField" size="small" class="maincol">
               <el-radio label="hs">按主要商品查询</el-radio>
               <el-radio label="country">按贸易伙伴查询</el-radio>
               <el-radio label="port">按收发货地区查询</el-radio>
               <el-radio label="mode">按贸易方式查询</el-radio>
             </el-radio-group>
           </el-form-item>
 
           <!-- 如果优先是 mode -->
           <template v-if="orderField === 'mode'">
             <el-form-item label="贸易方式">
               <el-select
                 v-model="advancedForm.tradeType"
                 placeholder="请选择贸易方式"
                 clearable
                 multiple
                 collapse-tags
                 collapse-tags-tooltip
                 filterable
                 class="select-small"
               >
                 <el-option
                   v-for="item in TradeDetailTypeOptions"
                   :key="item.code"
                   :label="item.label"
                   :value="item.code"
                 />
               </el-select>
             </el-form-item>
 
             <el-form-item label="主要商品">
               <el-popover
                 v-model:visible="showHsTree"
                 trigger="manual"
                 placement="right-start"
                 :width="650"
                 :height="350"
               >
                 <div class="hs-popover-content">
                   <Hstree @selection-change="onHsselection" />
                 </div>
                 <template #reference>
                   <el-switch
                     v-model="showHsTree"
                     active-text="选择HS编码"
                     size="small"
                   />
                 </template>
               </el-popover>
 
               <el-popover class="box-item" placement="right" :width="280">
                 <template #reference>
                   <el-button type="text" class="btn-small">
                     已选HS编码
                   </el-button>
                 </template>
 
                 <div class="selected-hs-popover">
                   <div v-if="SonhsData.length === 0" class="empty-tip">
                     暂无已选HS编码
                   </div>
                   <div v-else class="hs-list">
                     <div
                       v-for="(item, index) in SonhsData"
                       :key="index"
                       class="hs-item"
                     >
                       {{ item.label }}
                     </div>
                   </div>
                 </div>
               </el-popover>
             </el-form-item>
 
             <el-form-item label="贸易伙伴">
               <el-select
                 v-model="advancedForm.partner"
                 placeholder="请选择国家/地区"
                 clearable
                 multiple
                 collapse-tags
                 collapse-tags-tooltip
                 filterable
                 class="select-small"
               >
                 <el-option
                   v-for="item in PartnerTypeOptions"
                   :key="item.code"
                   :label="item.label"
                   :value="item.code"
                 />
               </el-select>
             </el-form-item>
 
             <el-form-item label="收发货地址">
               <el-select
                 v-model="advancedForm.address"
                 placeholder="请选择国家/地区"
                 clearable
                 multiple
                 collapse-tags
                 collapse-tags-tooltip
                 filterable
                 class="select-small"
               >
                 <el-option
                   v-for="item in AdressTypeOptions"
                   :key="item.code"
                   :label="item.label"
                   :value="item.code"
                 />
               </el-select>
             </el-form-item>
           </template>
 
           <!-- 如果优先是 hs -->
           <template v-else-if="orderField === 'hs'">
             <el-form-item label="主要商品">
               <el-popover
                 v-model:visible="showHsTree"
                 trigger="manual"
                 placement="right-start"
                 :width="650"
                 :height="350"
               >
                 <div class="hs-popover-content">
                   <Hstree @selection-change="onHsselection" />
                 </div>
                 <template #reference>
                   <el-switch
                     v-model="showHsTree"
                     active-text="选择HS编码"
                     size="small"
                   />
                 </template>
               </el-popover>
 
               <el-popover class="box-item" placement="right" :width="280">
                 <template #reference>
                   <el-button type="text" class="btn-small">
                     已选HS编码
                   </el-button>
                 </template>
 
                 <div class="selected-hs-popover">
                   <div v-if="SonhsData.length === 0" class="empty-tip">
                     暂无已选HS编码
                   </div>
                   <div v-else class="hs-list">
                     <div
                       v-for="(item, index) in SonhsData"
                       :key="index"
                       class="hs-item"
                     >
                       {{ item.label }}
                     </div>
                   </div>
                 </div>
               </el-popover>
             </el-form-item>
 
             <el-form-item label="贸易伙伴">
               <el-select
                 v-model="advancedForm.partner"
                 placeholder="请选择国家/地区"
                 multiple
                 collapse-tags
                 collapse-tags-tooltip
                 clearable
                 filterable
                 class="select-small"
               >
                 <el-option
                   v-for="item in PartnerTypeOptions"
                   :key="item.code"
                   :label="item.label"
                   :value="item.code"
                 />
               </el-select>
             </el-form-item>
 
             <el-form-item label="收发货地址">
               <el-select
                 v-model="advancedForm.address"
                 placeholder="请选择国家/地区"
                 clearable
                 multiple
                 collapse-tags
                 collapse-tags-tooltip
                 filterable
                 class="select-small"
               >
                 <el-option
                   v-for="item in AdressTypeOptions"
                   :key="item.code"
                   :label="item.label"
                   :value="item.code"
                 />
               </el-select>
             </el-form-item>
             <el-form-item label="贸易方式">
               <el-select
                 v-model="advancedForm.tradeType"
                 placeholder="请选择贸易方式"
                 multiple
                 collapse-tags
                 collapse-tags-tooltip
                 clearable
                 filterable
                 class="select-small"
               >
                 <el-option
                   v-for="item in TradeDetailTypeOptions"
                   :key="item.code"
                   :label="item.label"
                   :value="item.code"
                 />
               </el-select>
             </el-form-item>
           </template>
 
           <!-- 如果优先是 country -->
           <template v-else-if="orderField === 'country'">
             <el-form-item label="贸易伙伴">
               <el-select
                 v-model="advancedForm.partner"
                 placeholder="请选择国家/地区"
                 clearable
                 multiple
                 collapse-tags
                 collapse-tags-tooltip
                 filterable
                 class="select-small"
               >
                 <el-option
                   v-for="item in PartnerTypeOptions"
                   :key="item.code"
                   :label="item.label"
                   :value="item.code"
                 />
               </el-select>
             </el-form-item>
 
             <el-form-item label="主要商品">
               <el-popover
                 v-model:visible="showHsTree"
                 trigger="manual"
                 placement="right-start"
                 :width="650"
                 :height="350"
               >
                 <div class="hs-popover-content">
                   <Hstree @selection-change="onHsselection" />
                 </div>
                 <template #reference>
                   <el-switch
                     v-model="showHsTree"
                     active-text="选择HS编码"
                     size="small"
                   />
                 </template>
               </el-popover>
 
               <el-popover class="box-item" placement="right" :width="280">
                 <template #reference>
                   <el-button type="text" class="btn-small">
                     已选HS编码
                   </el-button>
                 </template>
 
                 <div class="selected-hs-popover">
                   <div v-if="SonhsData.length === 0" class="empty-tip">
                     暂无已选HS编码
                   </div>
                   <div v-else class="hs-list">
                     <div
                       v-for="(item, index) in SonhsData"
                       :key="index"
                       class="hs-item"
                     >
                       {{ item.label }}
                     </div>
                   </div>
                 </div>
               </el-popover>
             </el-form-item>
 
             <el-form-item label="收发货地址">
               <el-select
                 v-model="advancedForm.address"
                 placeholder="请选择国家/地区"
                 clearable
                 multiple
                 collapse-tags
                 collapse-tags-tooltip
                 filterable
                 class="select-small"
               >
                 <el-option
                   v-for="item in AdressTypeOptions"
                   :key="item.code"
                   :label="item.label"
                   :value="item.code"
                 />
               </el-select>
             </el-form-item>
             <el-form-item label="贸易方式">
               <el-select
                 v-model="advancedForm.tradeType"
                 placeholder="请选择贸易方式"
                 clearable
                 multiple
                 collapse-tags
                 collapse-tags-tooltip
                 filterable
                 class="select-small"
               >
                 <el-option
                   v-for="item in TradeDetailTypeOptions"
                   :key="item.code"
                   :label="item.label"
                   :value="item.code"
                 />
               </el-select>
             </el-form-item>
           </template>
 
           <!-- 如果优先是 port -->
           <template v-else-if="orderField === 'port'">
             <el-form-item label="收发货地址">
               <el-select
                 v-model="advancedForm.address"
                 placeholder="请选择国家/地区"
                 clearable
                 multiple
                 collapse-tags
                 collapse-tags-tooltip
                 filterable
                 class="select-small"
               >
                 <el-option
                   v-for="item in AdressTypeOptions"
                   :key="item.code"
                   :label="item.label"
                   :value="item.code"
                 />
               </el-select>
             </el-form-item>
 
             <el-form-item label="主要商品">
               <el-popover
                 v-model:visible="showHsTree"
                 trigger="manual"
                 placement="right-start"
                 :width="650"
                 :height="350"
               >
                 <div class="hs-popover-content">
                   <Hstree @selection-change="onHsselection" />
                 </div>
                 <template #reference>
                   <el-switch
                     v-model="showHsTree"
                     active-text="选择HS编码"
                     size="small"
                   />
                 </template>
               </el-popover>
 
               <el-popover class="box-item" placement="right" :width="280">
                 <template #reference>
                   <el-button type="text" class="btn-small">
                     已选HS编码
                   </el-button>
                 </template>
 
                 <div class="selected-hs-popover">
                   <div v-if="SonhsData.length === 0" class="empty-tip">
                     暂无已选HS编码
                   </div>
                   <div v-else class="hs-list">
                     <div
                       v-for="(item, index) in SonhsData"
                       :key="index"
                       class="hs-item"
                     >
                       {{ item.label }}
                     </div>
                   </div>
                 </div>
               </el-popover>
             </el-form-item>
 
             <el-form-item label="贸易伙伴">
               <el-select
                 v-model="advancedForm.partner"
                 placeholder="请选择国家/地区"
                 clearable
                 multiple
                 collapse-tags
                 collapse-tags-tooltip
                 filterable
                 class="select-small"
               >
                 <el-option
                   v-for="item in PartnerTypeOptions"
                   :key="item.code"
                   :label="item.label"
                   :value="item.code"
                 />
               </el-select>
             </el-form-item>
             <el-form-item label="贸易方式">
               <el-select
                 v-model="advancedForm.tradeType"
                 placeholder="请选择贸易方式"
                 clearable
                 multiple
                 collapse-tags
                 collapse-tags-tooltip
                 filterable
                 class="select-small"
               >
                 <el-option
                   v-for="item in TradeDetailTypeOptions"
                   :key="item.code"
                   :label="item.label"
                   :value="item.code"
                 />
               </el-select>
             </el-form-item>
           </template>
 
           <!-- 通用：时间范围 -->
           <el-form-item label="起止时间">
             <div class="date-type-group">
               <el-radio-group v-model="advancedForm.dateMode" size="small">
                 <el-radio label="year">按年</el-radio>
                 <el-radio label="month">按月</el-radio>
               </el-radio-group>
             </div>
             <div class="date-pickers">
               <el-date-picker
                 v-for="(field, idx) in advancedDateFields"
                 :key="field"
                 v-model="advancedForm[field]"
                 :type="advancedForm.dateMode"
                 :placeholder="advancedPickerPlaceholders[idx]"
                 :disabled-date="disabledAdvancedDate"
                 class="date-picker"
               />
             </div>
           </el-form-item>
 
           <el-form-item label="进出口类型">
             <el-select
               v-model="advancedForm.type"
               multiple
               clearable
               placeholder="请选择"
               class="select-small"
             >
               <el-option
                 v-for="item in tradeTypeOptions"
                 :key="item.code"
                 :label="item.label"
                 :value="item.code"
               />
             </el-select>
           </el-form-item>
 
           <el-form-item label="计算方式">
             <el-select
               v-model="advancedForm.statisticsType"
               multiple
               placeholder="请选择计算方式"
               clearable
               class="select-small"
             >
               <el-option
                 v-for="item in calculationTypeOptions"
                 :key="item.code"
                 :label="item.label"
                 :value="item.code"
               />
             </el-select>
           </el-form-item>
 
           <!-- 通用：其他数值 -->
           <el-form-item label="其他数值">
             <el-checkbox-group v-model="advancedForm.others">
               <el-checkbox
                 v-for="item in checkList"
                 :key="item.code"
                 :label="item.label"
                 :value="item.code"
                 class="checkbox-small"
               />
             </el-checkbox-group>
           </el-form-item>
 
           <!-- 通用：操作按钮 -->
           <el-form-item class="form-actions">
             <el-button class="" @click="onAdvancedReset">取消</el-button>
             <el-button type="primary" @click="onAdvancedConfirm">
               搜索</el-button
             >
           </el-form-item>
         </el-form>
 </template>
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import { QueryDataApi } from '../../api/Data'
 import { toYearDate, toMonthDate, formatYear, formatYearMonth } from '../../utils/dateUtils'
 import Hstree from './CHHstree.vue'
 
 const emit = defineEmits(['detail-search'])
 
 // 表单模型
 const advancedForm = ref({
   partner: [],
   address: [],
   tradeType: [],
   dateMode: 'year',
   yearStart: null,
   yearEnd: null,
   yearMonthStart: null,
   yearMonthEnd: null,
 })
 
 // 单选指标
 const orderField = ref('hs')
 
 // 下拉选项
 const TradeDetailTypeOptions = ref([])
 const PartnerTypeOptions = ref([])
 const AdressTypeOptions = ref([])
 const tradeTypeOptions=ref([])
 const calculationTypeOptions = ref([])
 const checkList = ref([])
 
 // HS 树
 const showHsTree = ref(false)
 const SonhsData = ref([])
 
 // 时间范围限制
 let minYear, maxYear, minYearMonth, maxYearMonth
 
 // 禁用日期逻辑
 const disabledAdvancedDate = (date) => {
   const y = date.getFullYear()
   if (advancedForm.value.dateMode === 'year') {
     return y < minYear || y > maxYear
   }
   const code = y * 100 + date.getMonth() + 1
   return code < minYearMonth || code > maxYearMonth
 }
 
 // 依据 dateMode 计算要渲染的字段和 placeholder
 const advancedDateFields = computed(() =>
   advancedForm.value.dateMode === 'year'
     ? ['yearStart', 'yearEnd']
     : ['yearMonthStart', 'yearMonthEnd']
 )
 const advancedPickerPlaceholders = computed(() =>
   advancedForm.value.dateMode === 'year'
     ? ['开始年份', '结束年份']
     : ['开始月份', '结束月份']
 )
 
 // HS 选中回调
 const onHsselection = (items) => {
   SonhsData.value = items
 }
 
 // 搜索按钮
 const onAdvancedConfirm = () => {
   const payload = {
     mainCol: orderField.value,
     partner: advancedForm.value.partner,
     address: advancedForm.value.address,
     mode: advancedForm.value.tradeType,
     hs: SonhsData.value.map(i => i.code),
     timeType: advancedForm.value.dateMode,
     timeStart: advancedForm.value.dateMode === 'year'
       ? formatYear(advancedForm.value.yearStart)
       : formatYearMonth(advancedForm.value.yearMonthStart),
     timeEnd: advancedForm.value.dateMode === 'year'
       ? formatYear(advancedForm.value.yearEnd)
       : formatYearMonth(advancedForm.value.yearMonthEnd),
     pageNum: 1,
     pageSize: 20
   }
   emit('detail-search', payload)
 }
 
 // 重置按钮
 const onAdvancedReset = () => {
   Object.assign(advancedForm.value, {
     partner: [], address: [], tradeType: [],
     dateMode: 'year',
     yearStart: minYear ? toYearDate(maxYear) : null,
     yearEnd: minYear ? toYearDate(maxYear) : null,
     yearMonthStart: minYearMonth ? toMonthDate(maxYearMonth) : null,
     yearMonthEnd: minYearMonth ? toMonthDate(maxYearMonth) : null,
   })
   orderField.value = 'hs'
   SonhsData.value = []
 }
 
 onMounted(async () => {
   // 获取时间范围
   const { data } = await QueryDataApi.getDate()
   const d = data.timeRangeChina
   minYear = d.yearStart; maxYear = d.yearEnd
   minYearMonth = d.yearMonthStart; maxYearMonth = d.yearMonthEnd
   // 初始化 time pickers
   advancedForm.value.yearStart = toYearDate(maxYear)
   advancedForm.value.yearEnd = toYearDate(maxYear)
   advancedForm.value.yearMonthStart = toMonthDate(maxYearMonth)
   advancedForm.value.yearMonthEnd = toMonthDate(maxYearMonth)
 
   // 获取其余下拉选项
   const [modeRes, partnerRes, addrRes] = await Promise.all([
     QueryDataApi.getTradeDetailType(),
     QueryDataApi.getPartnerType(),
     QueryDataApi.getAddressType()
   ])
   TradeDetailTypeOptions.value = Object.values(modeRes.data.mode || {})
   PartnerTypeOptions.value = Object.values(partnerRes.data.country || {})
   AdressTypeOptions.value = Object.values(addrRes.data.port || {})
 
 
 
 
   QueryDataApi.getOtherType().then((res) => {
     checkList.value = Object.values(res.data.dataCol || {});
   });
   QueryDataApi.getTradeType().then((res) => {
     const options = Object.values(res.data.exIm || {});
     tradeTypeOptions.value = options;
 
   
   });
   QueryDataApi.getCalculationType().then((res) => {
     const options = Object.values(res.data.statisticsType || {});
     calculationTypeOptions.value = options;
 
    
   });
 })
 </script>
 
 <style lang="scss" scoped>
 .search-form {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 12px;
   align-items: start;
 
   .maincol ::v-deep .el-radio__label {
     width: 90px;
   }
 }
 
 .date-type-group {
   margin-bottom: 4px;
   .el-radio__label {
     font-size: 12px;
   }
 }
 
 .date-pickers {
     display: flex;
     gap: 8px;
     align-items: center;
     width: 100%;
   }
 
   .date-picker {
     width: 160px; /* 缩小日期框 */
     font-size: 12px; /* 调小日期选择器字体 */
   }
 
 
 .select-small {
   font-size: 12px;
 }
 
 .form-actions {
   grid-column: 1 / -1;
   display: flex;
   justify-content: flex-end;
   gap: 8px;
   margin-top: 12px;
 }
 </style>
 